<template>
    <div class="scene_root">
        <head-view class="head" />

        <div class="content-container">
            <div class="left-conent">
                <div>
                    <el-radio-group v-model="radio" size="medium">
                        <el-radio-button label="add"
                            >Add Marker</el-radio-button
                        >
                        <el-radio-button label="select"
                            >Select Marker</el-radio-button
                        >
                    </el-radio-group>
                </div>
            </div>
            <threed-view ref="threedView" @onClickPosition="onClickPosition" />
        </div>
    </div>
</template>

<script>
import HeadForCad from "@/components/header/Head";
import LeftContent from "@/components/ThreeDScene/LeftContent/index";
import ThreeDBaseCom from "@/components/ThreeDScene/threeDBaseCom.vue";
import threeData from "@/utils/testThreeData.js";
import eventBus from "@/eventBus/bus";

export default {
    components: {
        "threed-view": ThreeDBaseCom,
        "head-view": HeadForCad,
        "left-content": LeftContent,
    },

    data() {
        //数据
        return {
            radio: "add", // add  select

            tempBallId: 0,
            tempBallShapes: ["circle", "square", "diamond"],
            tempFillColors: [
                "#ff0000",
                "#00ff00",
                "#0000ff",
                "#ff00ff",
                "#ffff00",
                "#00ffff",
            ],
        };
    },

    methods: {
        addMarker(inPos) {
            let tempShapeTypeIndex = this.randomNum(0, 2);
            let tempShapeFillColor = this.randomNum(0, 5);
            let tempShapeBorderColor = this.randomNum(0, 5);

            this.$refs.threedView.addBallLabel(
                this.tempBallId,
                this.tempBallId,
                this.tempBallShapes[tempShapeTypeIndex],
                inPos,
                this.tempFillColors[tempShapeFillColor],
                this.tempFillColors[tempShapeBorderColor]
            );
            this.tempBallId++;
            // addBallLabel(inId, inStr, inShapeType, inPos, inFillColor, inBorderColor)
        },

        onClickPosition(inPos) {
            if (this.radio == "add") {
                this.addMarker(inPos);
            } else {
            }
        },

        //生成从minNum到maxNum的随机数
        randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(
                        Math.random() * (maxNum - minNum + 1) + minNum,
                        10
                    );
                    break;
                default:
                    return 0;
                    break;
            }
        },
    },

    created() {},

    mounted() {
        this.$refs.threedView.initEngineAndScene(
            threeData.modelJsonUrl,
            threeData.modelId,
            threeData.initView
        );
    },
};
</script>

<style lang="scss">
.scene_root {
}

.head {
}

.content-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: calc(100% - 40px);
    background: #cccbcb;

    .left-conent {
        position: relative;
        background-color: #fff;
        width: 18%;
        height: 100%;
        box-sizing: border-box;
    }
}
</style>